<template>
 <div>
     <input type="button" value="显示隐藏" @click="b=!b">
     <transition name="fade">
        <div class="box" v-if="b"></div>
     </transition>
     <transition-group tag='ul' name="fadeUp">
       <li v-for="(item,index) in arr" :key="item">
        {{item}} <a href="#" @click="del(index)">删除</a>
        </li> 
     </transition-group>
 </div>
</template>

<script>
 export default {
   name:'' ,
   data () {
     return {
         b:true,
         arr:[1,2,3,4,5]
     }
   },
   created(){

   },
   methods: {
       del(index){
           this.arr.splice(index,1)
       }
   },
   components: {

   }
 }
</script>

<style scoped>

 .box{
     width: 200px;
     height: 200px;
     background: #00ff00;
     animation-duration: 1s;
 }
 li{
     width: 100px;
     height: 100px;
     background: #00ff00;
 }
</style>
